<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>mixin</title>
    <script src='./vue.global.js'></script>
</head>
<body>
    <div id='app'></div>

    <script>
        const app = Vue.createApp({
            // 从外界注入mixin共享/复用的数据
            // mixins:[myMixin],

            template:`
            <son :count="count"></son>
            <hr>
            {{count}}
            <button @click="count++">+</button>
            `,

            data(){
                return {
                    message:"goodbye",
                    foo:"abc",
                    count:0
                }
            },
            methods:{},
            computed:{},

            /* 组件创建实例完毕时回调的生命周期 */
            created(){
                console.log("根组件实例创建完毕");
                console.log(this.$data);
            }

        })

        /* 注册全局mixin：默认注入给所有组件 */
        /* 通过mixin提取可复用的选项（data methods computed watch 生命周期...） */
        app.mixin({
            data(){
                return {
                    navigator:"chrome"
                }
            },
            created(){
                console.log("mixin created");
            }
        })

        app.component("son",{
            props:["count"],
            template:`
            <div>
                <h3>哥是儿子{{count}}</h3>
            </div>
            `,
            created(){
                console.log("son created");
            }
        })

        app.mount('#app')
    </script>
</body>
</html>